<template>
    <div class="console" id="terminal">
    </div>
</template>

<script>
    import { Terminal } from "xterm";
    import "xterm/css/xterm.css";
    import "xterm/lib/xterm.js";
    import {FitAddon} from 'xterm-addon-fit'
    export default {
        name: 'myTerminal',
        props: {
            terminal: {
                type: Object,
                // default: {}
            }
        },
        data(){
            return {
                term: null,
            }
        },
        methods: {
            

        },
        mounted: function(){
            console.log('pid : ' + this.terminal.pid + ' is on ready')
            let terminalContainer = document.getElementById('terminal')
            let term = new  Terminal({
                rendererType: "canvas", //渲染类型
                rows: parseInt(this.terminal.rows),
                cols: parseInt(this.terminal.cols),
                convertEol: true, //启用时，光标将设置为下一行的开头
                disableStdin: true, //是否应禁用输入。
                cursorStyle: "underline", //光标样式
                cursorBlink: true, //光标闪烁
                // background: "white",
            })
            term.open(terminalContainer)
            var fitAddon = new FitAddon()
            term.loadAddon(fitAddon);
            fitAddon.fit();

            window.addEventListener("resize",resizeScreen)
            function resizeScreen(){
                try {
                    fitAddon.fit()
                    term.onResize(()=>{
                        this.onSend({ Op: "resize", Cols: this.term.cols, Rows: this.term.rows });
                    })
                }catch(e){
                    console.log("e", e.message);
                }
            }

            term._initialized = true;

            term.writeln("welcome")
            // term.fit()
            this.term = term
            
        },
        beforeDestroy() {
            this.term.dispose()
        }
    }
</script>
<style scoped>
    .console {
        /* height: 400px;  */
        margin-top:10px; 
        background: white;
    }
</style>